<template>
  <ScreenModal v-model="isVisible" title="案件详情" :width="1360">
    <div class="case">
      <div class="case_table">
        <div class="case_table_left" style="width:396px; height:224px">
          <el-carousel :interval="5000" arrow="always" width="396px" height="224px" align="center">
            <el-carousel-item v-for="item in oderList.img" :key="item">
              <el-image :src="item" fit="cover" :preview-src-list="oderList.img" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="case_table_right">
          <ul>
            <li>任务编号</li>
            <li>{{ oderList.orderNum }}</li>
            <li>案件分类</li>
            <li>{{ oderList.type }}</li>
          </ul>
          <ul>
            <li>案件类型</li>
            <li>{{ oderList.types }}</li>
          </ul>
          <ul>
            <li>问题内容</li>
            <li>
              <p>{{ oderList.content }}</p>
            </li>
          </ul>
        </div>
      </div>

      <div class="case_flow">
        <div class="case_flow_title">案件动态</div>
        <div class="case_flow_box">
          <div v-for="(item, index) in oderList.dynamic" :key="'a' + index">
            <div class="case_flow_box_time">
              <span></span>
              <span>{{ item.flowStep + '：' + item.flowTime }}</span>
            </div>
            <div class="case_flow_box_content">
              <p>{{ item.flowContent }}</p>
              <span v-if="index + 1 !== oderList.dynamic.length"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ScreenModal>
</template>
<script>
import { CommonDB } from '@/api'

export default {
  data() {
    return {
      isVisible: false,
      oderList: {},
    }
  },
  methods: {
    open(id,img) {
      this.isVisible = true
      this.getOaOrderGetInfo(id,img)
    },
    getOaOrderGetInfo(id,img) {
      const data = {
        orderId: id,
      }
      CommonDB.getOaOrderGetInfo(data).then((res) => {
        this.oderList = res.data
        const defaultImg = require('../assets/images/videoimg.png')
        
        let arr = this.oderList.img.split(',').reverse()

        arr.map((item,index)=>{
          if(item == img){
            arr.splice(index,1)
            arr.unshift(img)
          }
        })
        this.oderList.img = this.oderList.img !== "" ? arr : [defaultImg]
      })
    },
  },
}
</script>
<style lang="less" scoped>
::-webkit-scrollbar {
  width: 0;
}
/deep/.el-carousel__indicators{
  display: none;
}
/deep/.el-image{
  height: 100%;
}
.case {
  height: 100%;
  padding-top: 40px;
  &_table {
    width: 100%;
    border: 1px solid rgba(33, 158, 255, 0.6);
    display: flex;
    &_left {
      // padding: 20px;
      border-right: 1px solid rgba(33, 158, 255, 0.6);
      img {
        width: 396px;
        height: 224px;
      }
    }
    &_right {
      width: 100%;
      display: flex;
      flex-direction: column;
      ul {
        display: flex;
        li {
          line-height: 40px;
          padding-left: 20px;
        }
        li:nth-child(1),
        li:nth-child(3) {
          font-size: 14px;
          font-family: Noto Sans S Chinese;
          font-weight: 400;
          color: #9ed5ff;
          border-right: 1px solid rgba(33, 158, 255, 0.6);
        }
      }
      ul:nth-child(1) {
        height: 40px;
        border-bottom: 1px solid rgba(33, 158, 255, 0.6);
        li:nth-child(1),
        li:nth-child(3) {
          width: 15%;
        }
        li:nth-child(2),
        li:nth-child(4) {
          width: 35%;
          font-size: 14px;
          font-family: Noto Sans S Chinese;
          font-weight: 400;
        }
        li:nth-child(2) {
          color: #25ffe8;
          border-right: 1px solid rgba(33, 158, 255, 0.6);
        }
        li:nth-child(4) {
          color: #fff;
        }
      }
      ul:nth-child(2) {
        height: 40px;
        border-bottom: 1px solid rgba(33, 158, 255, 0.6);
        li:nth-child(1) {
          width: 15%;
        }
        li:nth-child(2) {
          width: 85%;
          font-size: 14px;
          font-family: Noto Sans S Chinese;
          font-weight: 400;
          color: #ffffff;
        }
      }
      ul:nth-child(3) {
        height: 100%;
        // overflow: hidden;
        li:nth-child(1) {
          height: 100%;
          min-width: 15%;
          display: flex;
          align-items: center;
        }
        li:nth-child(2) {
          height: 100%;
          padding: 23px 0 23px 20px;
          p {
            max-height: 138px;
            font-size: 14px;
            font-family: Noto Sans S Chinese;
            font-weight: 400;
            color: #ffffff;
            line-height: 25px;
            overflow: auto;
          }
        }
      }
    }
  }

  &_flow {
    width: 100%;
    // border: 1px solid rgba(33, 158, 255, 0.6);
    margin-top: 20px;
    &_title {
      background: rgba(31, 73, 135, 0.6);
      height: 50px;
      font-size: 18px;
      font-family: Noto Sans S Chinese;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 50px;
      border: 1px solid rgba(129, 167, 250);
    }
    &_box {
      padding: 30px 30px 0;
      border: 1px solid rgba(33, 158, 255, 0.6);
      border-top: 0;
      max-height: 250px;
      overflow: auto;
      &_time {
        width: 100%;
        position: relative;
        padding-left: 20px;
        span:nth-child(1) {
          display: inline-block;
          width: 16px;
          height: 16px;
          background: #fafafa;
          border: 4px solid #0074fa;
          border-radius: 50%;
          position: absolute;
          top: 0;
          left: -7px;
        }
        span:nth-child(2) {
          font-size: 16px;
          font-family: Noto Sans S Chinese;
          font-weight: 400;
          color: #25ffe8;
        }
      }
      &_content {
        width: 100%;
        padding: 20px;
        position: relative;
        p {
          font-size: 16px;
          font-family: Noto Sans S Chinese;
          font-weight: 400;
          color: #ffffff;
        }
        span {
          width: 2px;
          display: block;
          position: absolute;
          left: 0;
          top: -10px;
          height: calc(100% + 10px);
          background: #d0d4d9;
        }
      }
    }
  }
}
</style>
